<!DOCTYPE HTML>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="cache-control" content="max-age=604800" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="author" content="Bootstrap-ecommerce by Vosidiy">

    <title>创建订单</title>

    <link href="/images/favicon.ico" rel="shortcut icon" type="image/x-icon">

    <!-- jQuery -->
    <script src="/js/jquery-2.0.0.min.js" type="text/javascript"></script>

    <!-- Bootstrap4 files-->
    <script src="/js/bootstrap.bundle.min.js" type="text/javascript"></script>
    <link href="/css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- Font awesome 5 -->
    <link href="/fonts/fontawesome/css/fontawesome-all.min.css" type="text/css" rel="stylesheet">

    <!-- plugin: fancybox  -->
    <script src="/plugins/fancybox/fancybox.min.js" type="text/javascript"></script>
    <link href="/plugins/fancybox/fancybox.min.css" type="text/css" rel="stylesheet">

    <!-- custom style -->
    <link href="/css/ui.css" rel="stylesheet" type="text/css"/>
    <link href="/css/responsive.css" rel="stylesheet" media="only screen and (max-width: 1200px)" />

    <!-- custom javascript -->
    <script src="/js/script.js" type="text/javascript"></script>

    <script type="text/javascript">
        /// some script

        // jquery ready start
        $(document).ready(function() {
            // jQuery code

        });
        // jquery end
    </script>

</head>
<body>
<header class="section-header">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <form action="/HTML/userInfo" method="post" name="showUserInfoForm" >
            <a class="navbar-brand" href="javascript:history.go(-1)" name="savesubmit" id="savesubmit"> <img class="logo" src="/images/logo-white.png" th:text="'  '+'创建订单'"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </form>

        <div class="collapse navbar-collapse" id="navbar1">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="btn ml-2 btn-outline-danger" href="/HTML/login">退出登录<span class="sr-only">(current)</span></a>
                </li>
                <li class="new-item">
                    <a class="btn ml-2 btn-outline-success" href="/HTML/home">返回主页</a>
                </li>
                <form action="/HTML/lookOrderList" method="post" name="showUserOrderForm" th:value="${account}">
                    <li class="nav-item">
                        <a class="btn ml-2 btn-outline-primary" href="javascript:showUserOrderForm.submit();">我的订单<span class="sr-only">(current)</span></a>
                    </li>
                </form>
                <li class="nav-item">
                    <a class="btn ml-2 btn-outline-warning" href="javascript:showUserInfoForm.submit();">个人资料</a>
                </li>
            </ul>
        </div>
    </nav>
</header> <!-- section-header.// -->


<!-- ========================= SECTION CONTENT ========================= -->
<section class="section-content bg padding-y border-top">
    <div class="container">
        <div class="row">
            <aside class="col-sm-3">
                <p class="alert alert-success">请先填写以下信息，然后在右边选择您心仪的房间，点击“确认并提交订单”后系统将为您创建订单</p>
                <p class="alert alert-danger">请务必填写以下个人身份信息，由于您的填写有误而造成的个人损失，平台将不予赔付</p>
                <div class="form-group input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text"> <i class="fas fa-male"></i>&nbsp;订购人姓名 </span>
                    </div>
                    <input type="text" class="form-control"placeholder="必填项：姓名" name="inputname" id="inputname">
                </div> <!-- form-group// -->
                <div class="form-group input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text"> <i class="far fa-id-card"></i></i>&nbsp;身份证号 </span>
                    </div>
                    <input type="text" class="form-control"placeholder="必填项：身份证号" name="inputidNumber" id="inputidNumber">
                </div> <!-- form-group// -->
                <div class="form-group input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text"> <i class="fas fa-users"></i></i>&nbsp;入住人数 </span>
                    </div>
                    <input type="text" class="form-control" placeholder="必填项：入住人数" name="inputinNumber" id="inputinNumber">
                </div> <!-- form-group// -->
                <div class="form-group input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text"> <i class="fas fa-phone"></i>&nbsp;手机号 </span>
                    </div>
                    <input type="text" class="form-control"placeholder="必填项：手机号" name="inputphone" id="inputphone">
                </div> <!-- form-group// -->
                <div class="form-group input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text"> <i class="far fa-circle"></i>&nbsp;入住日期 </span>
                    </div>
                    <input type="text" class="form-control"  placeholder="必填项：(yyyy-mm-dd)" name="inputinTime" id="inputinTime">
                </div> <!-- form-group// -->
                <div class="form-group input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text"> <i class="fas fa-circle"></i>&nbsp;离店日期 </span>
                    </div>
                    <input type="text" class="form-control" placeholder="必填项：(yyyy-mm-dd)" name="inputoutTime" id="inputoutTime">
                </div> <!-- form-group// -->
            </aside> <!-- col.// -->
            <main class="col-sm-9">
                <div class="card">
                    <table class="table table-hover shopping-cart-wrap">
                        <thead class="text-muted">
                        <tr>
                            <th scope="col"width="300">房间</th>
                            <th scope="col" width="100">房型</th>
                            <th scope="col" width="120">每日价</th>
                            <th scope="col" class="text-right" width="140">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr  th:each="rooms,roomsIndex: ${rooms}">
                            <td>
                                <figure class="media">
                                    <div class="img-wrap"><img th:src="@{${hotel.photo1}}" class="img-thumbnail img-sm"></div>
                                    <figcaption class="media-body">
                                        <h6 class="title text-truncate"  style="font-weight: bold;font-size:20px" th:text="${hotel.hotelTranslatedName}"> </h6>
                                        <dl class="dlist-inline small">
                                            <dt style="font-weight: bold;font-size:13px" th:text="'房间号：'"></dt>
                                            <dd th:text="${rooms.roomNumber}"></dd>
                                        </dl>
                                    </figcaption>
                                </figure>
                            </td>
                            <td>
                                <div class="price-wrap">
                                    <var class="text-primary"  style="font-weight: bold;font-size:20px" th:text="${rooms.roomType}"></var>
                                </div>
                            </td>
                            <td>
                                <div class="price-wrap">
                                    <var class="text-warning" style="font-weight: bold;font-size:20px" th:text="'CNY '+${rooms.price}"></var>
                                    <br>
                                    <small class="text-muted">每日房价可能会有变动</small>
                                </div> <!-- price-wrap .// -->
                            </td>
                            <td class="text-right">
                                <form action="/HTML/createOrderTo" method="post" name="form1" >
                                    <input type="hidden" name="index1" id="index1" th:value="${roomsIndex.index}">
                                    <br>
                                    <button class="btn btn-outline-success" data-toggle="tooltip" type="submit"
                                            th:onclick="getAllData([[${roomsIndex.index}]])">
                                        <i class="fa fa-shopping-cart">&nbsp;</i>
                                        <span >确认并提交订单</span>
                                    </button>
                                    <input type="hidden" name="roomNumber" id="roomNumber" th:value="${rooms.roomNumber}" >
                                    <input type="hidden"name="orderId" th:value="${orderId}">
                                    <input type="hidden" name="name" id="name" value="">
                                    <input type="hidden" name="idNumber" id="idNumber"value="">
                                    <input type="hidden" name="inNumber" id="inNumber"value="">
                                    <input type="hidden" name="phone" id="phone"value="">
                                    <input type="hidden" name="inTime" id="inTime"value="">
                                    <input type="hidden" name="outTime" id="outTime"value="">
                                    <!--拿到索引-->

                                </form>
                                <!--<button  class="btn btn-sm btn-primary " type="submit"   onclick="func()">确认并提交订单</button>-->
                                <!--<a href="" class="btn btn-outline-danger"> × Remove</a>-->
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div> <!-- card.// -->
            </main> <!-- col.// -->
        </div>

    </div> <!-- container .//  -->
</section>
<!-- ========================= SECTION CONTENT END// ========================= -->

<!-- ========================= SECTION  ========================= -->
<section class="section-name bg-white padding-y">
    <div class="container">
        <header class="section-heading">
            <h2 class="title-section">Section name</h2>
        </header><!-- sect-heading -->

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div><!-- container // -->
</section>
<!-- ========================= SECTION  END// ========================= -->

<!-- ========================= SECTION  ========================= -->
<section class="section-name bg padding-y">
    <div class="container">
        <h4>Another section if needed</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div><!-- container // -->
</section>
<!-- ========================= SECTION  END// ========================= -->

<!-- ========================= FOOTER ========================= -->
<footer class="section-footer bg-dark white">
    <div class="container">
        <section class="footer-bottom row">
            <div class="col-sm-6">
                <p> 四川大学实训项目 <br>  第六组作品</p>
            </div>
            <div class="col-sm-6">
                <p class="text-sm-right">
                    2019 · 7 · 8 <br>
                    中国 · 成都
                    <!--<a href="http://bootstrap-ecommerce.com">Bootstrap-ecommerce UI kit</a>-->
                </p>
            </div>
        </section> <!-- //footer-top -->
    </div><!-- //container -->
</footer>
<!-- ========================= FOOTER END // ========================= -->
<script type="text/javascript" th:inline="javascript">
    function getAllData(a) {
        var name = document.getElementsByName("name");
        name[a].value =document.getElementById("inputname").value;
        var idNumber = document.getElementsByName("idNumber");
        idNumber[a].value =document.getElementById("inputidNumber").value;
        var inNumber = document.getElementsByName("inNumber");
        inNumber[a].value =document.getElementById("inputinNumber").value;
        var phone = document.getElementsByName("phone");
        phone[a].value =document.getElementById("inputphone").value;
        var inTime = document.getElementsByName("inTime");
        inTime[a].value =document.getElementById("inputinTime").value;
        var outTime = document.getElementsByName("outTime");
        outTime[a].value =document.getElementById("inputoutTime").value;
    }
</script>
</body>
</html>